<template>
  <div class="showCity">
    <van-index-bar :index-list="indexList" class="index-bar">
      <van-index-anchor index="热门">
        <template #default> 当地/热门 </template>
      </van-index-anchor>

      <div class="local-hot">
        <div class="locationCity">
          <van-button
            block
            round
            plain
            hairline
            class="button"
            :class="{ active: isCityActive(locationCity) }"
            @click="selectCity(locationCity)"
          >
            <span> {{ locationCity.cityName }}</span></van-button
          >
        </div>

        <div class="hotTopCity">
          <van-button
            block
            round
            plain
            hairline
            class="button"
            :class="{ active: isCityActive(hotTopCity) }"
            @click="selectCity(hotTopCity)"
          >
            <span> {{ hotCityCombinationName(hotTopCity) }}</span></van-button
          >
        </div>
      </div>
      <div class="hotAllCity">
        <van-button
          block
          round
          plain
          hairline
          class="button"
          :class="{ active: isCityActive(city) }"
          @click="selectCity(city)"
          v-for="city in hotAllCity"
          :key="city.cityId"
        >
          <span>{{ city.cityName }}</span></van-button
        >
      </div>

      <template v-for="item in allCity" :key="item.title">
        <van-index-anchor :index="item.title" />
        <template v-for="city in item.city" :key="city.cityId">
          <van-cell
            class="city-cell"
            :title="city.cityName"
            @click="selectCity(city)"
            :class="{ active: isCityActive(city) }"
          />
        </template>
      </template>
    </van-index-bar>
    <div class="buttons">
      <van-button round plain hairline block size="normal" @click="reset">清空</van-button>
      <van-button round hairline block size="normal" color="#FF1D41" @click="confirm"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, toRefs } from 'vue'
import { fetchShowCity } from '@/api/index.js'

import { useStore } from '@/stores/index.js'
import { showToast } from 'vant'
const store = useStore()

const props = defineProps(['allCity', 'hotAllCity', 'hotTopCity', 'locationCity'])
const { allCity, hotAllCity, hotTopCity, locationCity } = toRefs(props)

// console.log("hotTopCity", hotTopCity.value)

const emit = defineEmits(['update:cityId', 'close:cityOption', 'cityConfirmed'])

const letters = computed(() => {
  return allCity.value.map((item) => item.title)
})

const indexList = ref(['热门', ...letters.value])

//选中的城市名称
const selectCityName = ref(null)
//选中的城市id
const selectCityId = ref(null)

// 添加一个用于跟踪当前选中城市的响应式变量
const selectedCity = ref(null)

// 选中的城市按钮被激活
const isActive = ref(false)
// 当前点击的按钮索引值
const clickIndex = ref(null)

//热门城市组合
const hotCityCombinationName = (hotTopCity) => {
  // 将 hotTopCity 里面的城市名称用“+”拼接成字符串
  //console.log(hotTopCity.map((city) => city.cityName).join('+'))
  return hotTopCity.map((city) => city.cityName).join('+') // "中国香港+北京+南京
}
const hotCityCombinationId = (hotTopCity) => {
  //console.log(hotTopCity.map((city) => city.cityId))
  return hotTopCity.map((city) => city.cityId) // ['8100', '1101', '3201']
}

// 添加一个计算属性来判断特定城市是否被选中
const isCityActive = (city) => {
  if (!selectedCity.value) return false

  // 处理热门城市组合的情况
  if (Array.isArray(city) && Array.isArray(selectedCity.value)) {
    return JSON.stringify(city) === JSON.stringify(selectedCity.value)
  }

  // 处理单个城市的情况
  if (!Array.isArray(city) && !Array.isArray(selectedCity.value)) {
    return city.cityId === selectedCity.value.cityId
  }

  return false
}

//关于城市相关的筛选条件

/* 生命周期 */

const selectCity = (city) => {
  // 设置当前选中的城市
  selectedCity.value = city

  if (Array.isArray(city)) {
    // console.log('数组：', city)
    selectCityId.value = hotCityCombinationId(city) // ['8100', '1101', '3201']
    selectCityName.value = hotCityCombinationName(city) // "中国香港+北京+南京
  } else {
    selectCityName.value = city.cityName
    selectCityId.value = city.cityId
  }

  // console.log("selectCityId", selectCityId.value)
  // console.log("selectCityName", selectCityName.value)
  store.setShowCityList(selectCityId.value, selectCityName.value)

  // 设置 isActive 状态
  isActive.value = true
}

//按钮方法
const confirm = () => {
  // 开始查询
  emit(
    'update:cityId',
    Array.isArray(selectCityId.value) ? selectCityId.value : [selectCityId.value],
  )
  // 关闭dropdownitem
  emit('close:cityOption', false)

  //  "演出城市" 文字颜色变红

  // 通知 Filter.vue 组件设置城市已确认标志
  emit('cityConfirmed')
}

const reset = () => {}
</script>

<style scoped lang="scss">
.showCity {
  position: relative;
  height: 100vh;
  /* 设置视窗高度 */
  display: flex;
  flex-direction: column;

  :deep(.van-index-bar__sidebar) {
    top: 55%;
  }

  .index-bar {
    flex: 1;
    /* 占据剩余空间 */
    overflow-y: auto;
    /* 允许滚动 */
  }

  .local-hot {
    font-size: 12px;
    font-weight: 400;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;

    .locationCity {
      .button {
        font-size: 12px;
        font-weight: 400;
        background: #f6f6f7;
      }

      .active {
        background: #fff0f2;
        color: #ff1d41;
      }
    }

    .hotTopCity {
      .button {
        font-size: 12px;
        font-weight: 400;
        background: #f6f6f7;
      }

      .active {
        background: #fff0f2;
        color: #ff1d41;
      }
    }
  }

  .hotAllCity {
    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    font-size: 12px;
    font-weight: 400;

    .button {
      font-size: 12px;
      font-weight: 400;
      background: #f6f6f7;
    }

    .active {
      background: #fff0f2;
      color: #ff1d41;
    }
  }

  .city-cell.active {
    color: rgb(255, 29, 65);
  }

  .buttons {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 0;
    justify-content: space-between;
    gap: 10px;
    z-index: 10;
  }
}
</style>
